<script setup lang="ts">

import Icon7 from "@/assets/images/home/7.png";
import Icon14 from "@/assets/images/home/14.png";
import Icon19 from "@/assets/images/home/19.png";
import Icon11 from "@/assets/images/home/11.png";
import Icon15 from "@/assets/images/home/15.png";
import Icon8 from "@/assets/images/home/8.png";
import Icon13 from "@/assets/images/home/13.png";
import AppWrap from "@/components/app-wrap/index.vue";
import Text from "@/views/home/components/text.vue";
</script>

<template>
  <app-wrap>
    <div class="server">
      <div class="card-wrap">
        <!--服务商-->
        <div class="card">
          <p class="title">服务商</p>
          <ul class="list">
            <li><Text :icon="Icon7" text="赋能安装商" size="18"/></li>
            <li><Text :icon="Icon14" text="运维商" size="18"/></li>
            <li><Text :icon="Icon14" text="代理商等专业人群" size="18"/></li>
            <li><Text :icon="Icon14" text="做到业务流程管控" size="18"/></li>
            <li><Text :icon="Icon19" text="智能规范化运维" size="18"/></li>
            <li><Text :icon="Icon11" text="实现降本增效 " size="18"/></li>
          </ul>
          <button class="btn">了解详情</button>
        </div>
        <!--投资商-->
        <div class="card">
          <p class="title">投资商</p>
          <ul class="list">
            <li><Text :icon="Icon15" text="监控资产状态" size="18"/></li>
            <li><Text :icon="Icon8" text="自定义风险预警" size="18"/></li>
            <li><Text :icon="Icon13" text="智能化数据分析" size="18"/></li>
            <li><Text :icon="Icon13" text="有效保护资产安全" size="18"/></li>
          </ul>
          <button class="btn mt">了解详情</button>
        </div>
      </div>
    </div>
  </app-wrap>
</template>

<style scoped lang="scss">
.server{
  height: 931px;
  text-align: center;
  background: #bbb;
  .card-wrap{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
  }
  .card{
    width: 560px;
    height: 440px;
    background: #FAFCFF;
    box-shadow: -5px 0px 29px 0px rgba(35,28,43,0.13);
    border-radius: 21px;
    padding: 64px 28px;
    display: inline-block;
    margin: 9px 18px;
    vertical-align: top;
    text-align: left;
    .title{
      font-size: 36px;
      line-height: 36px;
      font-family: Alimama ShuHeiTi;
      font-weight: bold;
      color: #126EF8;
      text-align: left;
    }
    .list{
      color: #606060;
      margin-top: 30px;
      li{
        list-style: none;
        width: 50%;
        display: inline-block;
        margin: 22px 0;
      }
    }
    .btn{
      min-width: 101px;
      height: 30px;
      border: 1px solid #126EF8;
      border-radius: 3px;
      font-size: 16px;
      font-weight: 400;
      color: #126EF8;
      cursor: pointer;
      background: #fff;
      margin-top: 20px;
      &:hover{
        background: #126EF8;
        color: #fff;
      }
    }
    .mt{
      margin-top: 90px;
    }
  }
}
</style>
